
[class*='Column-container'] {
    display: flex;
    flex-direction: column;
}

[class*='Column-container'] > * {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 45px;
}

[class*='Column-header'] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

[class*='Column-header'] > h1 {
    text-transform: uppercase;
    font-size: 1.3em;
}

[class*='Column-header'] > .totalPlan {
    font-size: 1.2em;
    font-weight: 100;
}

/* row */

[class*='Column-container'] > * > *:not(:last-child) { margin-right: 5px }
[class*='Column-container'] [class*='-customize'] {
    margin-left: auto;
    text-align: center;
}

[class*='Column-container'] .fa-info-circle {
    position: absolute;
    right: 18px;
    top: 15px;
    margin: 0;
    z-index: 10;
}

[class*='Column-container'] [class*='-customize'] {
    width: auto;
    padding: 0;
}

[class*='Column-container'] [class*='addonRow-container'] {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
}
[class*='Column-container'] [class*='addonRow'] .addonRow-vpn { margin-right: 5px }
[class*='Column-container'] [class*='addonRow'] .pm_select {
    flex: 1;
    background: #FFF; /* highlight background*/
}
[class*='Column-container'] [class*='addonRow'] .pm_select select {
    width: 100%;
    padding-right: 40px /* info circle*/
}
[class*='Column-container'] .plusColumn-address [class*='addonRow'] .pm_select .fa,
[class*='Column-container'] .plusColumn-domain [class*='addonRow'] .pm_select .fa { right: 15px }
[class*='Column-container'] .professionalColumn-domain [class*='addonRow'] .pm_select .fa,
[class*='Column-container'] .professionalColumn-vpn [class*='addonRow'] .pm_select .fa { right: 15px }

[class*='Column-container'] .addonRow-price:not(:empty) { margin-left: 5px }


/* borders and spacing */
[class*='Column-container'] {
    border: 1px solid $border;
    border-radius: $border-radius;
}

[class*='Column-container']:not(:last-of-type) {
    margin-right: 4px;
}

[class*='Column-container'] > * {
    padding: 0px 10px;
}

[class*='Column-container'] > *:not(:last-child) {
    border-bottom: 1px solid $border;
}

/* align numbers with selects */
[class*='Column-container'] > .plusColumn-user,
[class*='Column-container'] > .professionalColumn-space,
[class*='Column-container'] > .professionalColumn-address  { padding: 0px 10px 0px 20px }


[class*='Column-header'] {
    height: 80px;
    border-bottom: 0;
    border-radius: $border-radius $border-radius 0 0;
}


[class*='Column-container'] > [class*='Column-sending'],
[class*='Column-container'] > [class*='Column-labels'],
[class*='Column-container'] > [class*='Column-support'],
[class*='Column-container'] > [class*='Column-filters'],
[class*='Column-container'] > [class*='Column-autoresponder'],
[class*='Column-container'] > [class*='Column-catch-all'],
[class*='Column-container'] > [class*='Column-member'] {
    height: 22px;
    border: 0;
    .fa-info-circle {
        position: static; /* reset */
    }
}
[class*='Column-container'] > .professionalColumn-space,
[class*='Column-container'] > .professionalColumn-address  {
    padding-right: 35px;
}

[class*='Column-container'] [class*='Column-sending'],
[class*='Column-container'] [class*='Column-vpn'] { margin-top: 15px; }

[class*='Column-container'] [class*='Column-vpn'] {
    border-top: 1px solid $border;
}

.totalRows-container > label:not(:first-of-type) { position: relative }
.totalRows-container > label:not(:first-of-type):before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    border-top: 1px solid $border;
    width: calc(100% + 20px);
}

.totalRows-container,
.freeColumn-free {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1;
    min-height: 130px;
}

.freeColumn-free {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: $primary;
    font-size: 1.1rem;
    font-weight: bold;
}

.freeColumn-container.freeColumn-show-vpn .freeColumn-free { display: none }
.freeColumn-container:not(.freeColumn-show-vpn) .totalRows-container { display: none }

.totalRows-container > label {
    flex: 1;
    width: 100%;
}

[class*='Column-footer'] {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: content-box;
    justify-content: space-between;
    padding: 10px;
    @import "selectPlan";
    @import "addVpn-button";
}

[class*='Column-footer'] .vpnIncluded {
    display: flex;
    align-items: center;
    height: 48px;
}

/* contexts */

[class*='Column-container'] > .disabled {
    opacity: .8;
    &::before {
        content:"\f00d";
        font-family: FontAwesome;
        margin-right: 5px;
    }
}

[class*='Column-container'] .isCurrent {
    position: absolute;
    left: -1px;
    top: -36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% + 2px);
    height: 32px;
    text-align: center;
    font-weight: bold;
    color: $white;
    background: $primary;
    border-radius: $border-radius $border-radius 0 0;
    box-shadow: 0px 0px 8px $primary,
                0px 0px 0px 2px $primary;
    border-bottom: 1px solid $primary;
}


.plusColumn-header { color: $plus }
.professionalColumn-header { color: $professional }
.planPrice { color: $dark }
.visionaryColumn-header { color: $visionary }
